<div class="wrapper-md">
    <div class="modal-backdrop fade in" ng-show="showLoading" style="z-index: 1040;">
        <div class="cube1"></div>
        <div class="cube2"></div>
    </div>
    <div class="panel panel-default form-horizontal form" role="form" id="test">
        <div class="panel-heading">
            查询条件
        </div>

        <div class="row wrapper disabled">
            <form>
            <div class="col-md-10">
                <div class="col-md-{{field.cols}}" ng-repeat="field in dbFormGrid.options.form.fields" >
                    <div class="form-group" >
                        <label class="col-md-{{field.labelCols}} control-label" style="padding-right: 0;">{{field.label}}</label>
                        <!-- orgTree -->
                        <div class="col-md-{{field.labelCols==''?'':12-field.labelCols}} dbFormItem"
                             ng-if="field.type=='orgTree'">
                            <db-org-tree></db-org-tree>
                        </div>
                        <div class="col-md-{{field.labelCols==''?'': (12 - field.labelCols - 1)}}"
                             ng-if="field.type==='text'">
                            <input ng-model='dbFormGrid.queryParams[field.name]' type="text"
                                   placeholder="{{field.placeholder}}"
                                   class="form-control">
                        </div>
                        <div class="col-md-{{field.labelCols==''?'': (12 - field.labelCols - 1)}}"
                             ng-if="field.type==='select'">
                            <select class="form-control" ng-model="dbFormGrid.queryParams[field.name]">
                                <option value="">全部</option>
                                <option ng-repeat="item in field.items" ng-value="item.key">{{item.value}}</option>
                            </select>
                        </div>

                        <div class="col-md-{{field.labelCols==''?'': (12 - field.labelCols - 1)}}"
                             ng-if="field.type==='groupSelect'">
                            <ui-select ng-model="dbFormGrid.queryParams[field.name]" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;">
                                <ui-select-match >{{$select.selected.value}}</ui-select-match>
                                <ui-select-choices group-by="'group'" repeat="item in field.items | propsFilter: {value: $select.search}">
                                    <div ng-bind-html="item.value | highlight: $select.search"></div>
                                </ui-select-choices>
                            </ui-select>
                        </div>

                        <div class="col-md-{{field.labelCols==''?'': (12 - field.labelCols - 1)}}"
                             ng-if="field.type==='uiSelect'">
                            <div class="input-group">
                                <ui-select ng-model="dbFormGrid.queryParams[field.name]" theme="bootstrap">
                                    <ui-select-match placeholder="请选择">{{$select.selected.name}}</ui-select-match>
                                    <ui-select-choices
                                            repeat="item in field.dropDownItemValue">
                                        <div ng-bind-html="item.name"></div>
                                    </ui-select-choices>
                                </ui-select>
                                <span class="input-group-btn">
                                  <button ng-click="dbFormGrid.queryParams[field.name] = [{name: '请选择', value: ''}]"
                                          class="btn btn-default" type="button" ui-options="dbFormGrid.queryParams.options[field.name]['dateRangeOptions']">
                                      <span class="glyphicon glyphicon-trash"></span>
                                  </button>
                                </span>
                            </div>
                        </div>
                        <div class="col-md-{{field.labelCols==''?'': (12 - field.labelCols - 1)}}"
                             ng-if="field.type==='dateRange'">
                            <input ng-model='dbFormGrid.queryParams[field.name]' type="text"
                                   placeholder="{{field.placeholder}}"
                                   class="form-control" ui-jq="daterangepicker" ui-options="{{dbFormGrid.options.config[field.name]['dateRangeOptions']}}" >
                        </div>
                        <div class="col-md-{{field.labelCols==''?'': (12 - field.labelCols - 1)}}"
                             ng-if="field.type==='date'">
                            <div class="input-group" ng-controller="DatepickerDemoCtrl">
                                <input type="text" class="form-control" datepicker-popup="{{dbFormGrid.options.config[field.name]['dateFormat']}}" ng-model="dbFormGrid.queryParams[field.name]"
                                       is-open="opened" datepicker-options="dbFormGrid.options.config[field.name]['dateOptions']"
                                       close-text="关闭" current-text="今天" clear-text="清空"/>
                                <span class=" input-group-btn">
                                    <button type="button" class="btn btn-default" ng-click="open($event)"><i
                                            class="glyphicon glyphicon-calendar"></i></button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-1 text-center" style="margin-bottom:0px;">
                <button  type="button" ng-click="resetQuery()" class="btn btn-info">
                    <i class="fa fa-mail-reply"></i>&nbsp;重置
                </button>
            </div>

            <div class="col-md-1 text-center" style="margin-bottom:0px;">
                <button type="button" ng-click="dbFormGrid.reLoadData()" class="btn btn-primary">
                    <i class="fa fa-search"></i>&nbsp;查询
                </button>
            </div>
            </form>

        </div>
        <div class="">
            <div class="panel-heading">
                数据列表
            </div>
            <div class="operateBtns" style="padding:15px; padding-bottom:0px;">
                <button ng-if="dbFormGrid.events.grid.operationEvents.length > 0"
                        ng-repeat="button in dbFormGrid.events.grid.operationEvents"
                        class="btn btn-sm {{button.class}}" type="button"
                        ng-click="dbFormGrid.operationButtonClick(button.click)" style="margin-right:10px;">
                    <i class="fa fa-{{button.icon}}"></i>
                    {{button.name}}
                </button>
            </div>
            <div class="table-responsive table-scrollable" style="padding:15px;">
                <!-- <table class="table table-striped b-t b-light">
                  <thead>
                    <tr>
                      <th style="width:20px;">
                        <label class="i-checks m-b-none">
                          <input type="checkbox"><i></i>
                        </label>
                      </th>
                      <th>Project</th>
                      <th>Task</th>
                      <th>Date</th>
                      <th style="width:30px;"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Idrawfast</td>
                      <td>4c</td>
                      <td>Jul 25, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Formasa</td>
                      <td>8c</td>
                      <td>Jul 22, 2013</td>
                      <td>
                        <a href ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Avatar system</td>
                      <td>15c</td>
                      <td>Jul 15, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Throwdown</td>
                      <td>4c</td>
                      <td>Jul 11, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Idrawfast</td>
                      <td>4c</td>
                      <td>Jul 7, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Formasa</td>
                      <td>8c</td>
                      <td>Jul 3, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Avatar system</td>
                      <td>15c</td>
                      <td>Jul 2, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                    <tr>
                      <td><label class="i-checks m-b-none"><input type="checkbox" name="post[]"><i></i></label></td>
                      <td>Videodown</td>
                      <td>4c</td>
                      <td>Jul 1, 2013</td>
                      <td>
                        <a href class="active" ui-toggle-class><i class="fa fa-check text-success text-active"></i><i class="fa fa-times text-danger text"></i></a>
                      </td>
                    </tr>
                  </tbody>
                </table> -->

                <table class="table table-striped table-bordered table-hover dataTable no-footer">
                    <thead>
                    <tr style="background-color: #E9ECF3;">
                        <th ng-if="dbFormGrid.options.grid.settings.showCheckBox"
                            style="vertical-align: middle;width:5%;text-align: center;padding: 0px;border-right-width: 0px;">

                            <div class="form-group form-md-checkboxes" style="margin: 0px;">
                                <div class="md-checkbox-inline" style="width: 64px; margin: 0px;">
                                    <div class="md-checkbox">

                                        <label class="i-checks m-b-none" ng-click="dbFormGrid.allRowClick()"
                                               ng-if="dbFormGrid.options.grid.settings.allRowChecked">
                                            <input type="checkbox" checked="checked"><i></i>
                                        </label>

                                        <label class="i-checks m-b-none" ng-click="dbFormGrid.allRowClick()"
                                               ng-if="!dbFormGrid.options.grid.settings.allRowChecked">
                                            <input type="checkbox"><i></i>
                                        </label>

                                    </div>
                                </div>
                            </div>

                        </th>
                        <th ng-repeat="header in dbFormGrid.options.grid.header"
                            style="width:{{header.width}};text-align: center;cursor:pointer;" ng-show="true"
                            title="{{header.name}}" ng-click="dbFormGrid.sorting(header)">
                            <span class="headerName">{{header.name}}</span>
                            <i class="sorting {{header.sortingClass}}" id="sorting"></i>
                        </th>
                        <th ng-if="dbFormGrid.options.grid.rowOperation.show"
                            style="width:{{dbFormGrid.options.grid.rowOperation.width}};text-align: center;">操作
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr ng-repeat="row in dbFormGrid.showRows" ng-init="p_index=$index">
                        <th ng-if="dbFormGrid.options.grid.settings.showCheckBox"
                            style="vertical-align: middle;width:5%;text-align: center;padding: 0px;border-right-width: 0px;">

                            <div class="form-group form-md-checkboxes" style="margin: 0px;">
                                <div class="md-checkbox-inline" style="width: 64px; margin: 0px;">
                                    <div class="md-checkbox">

                                        <label class="i-checks m-b-none" ng-click="dbFormGrid.rowClick(dbFormGrid.showRows[p_index])"
                                               ng-if="row.checked">
                                            <input type="checkbox" checked="checked"><i></i>
                                        </label>

                                        <label class="i-checks m-b-none" ng-click="dbFormGrid.rowClick(dbFormGrid.showRows[p_index])"
                                               ng-if="!row.checked">
                                            <input type="checkbox"><i></i>
                                        </label>

                                    </div>
                                </div>
                            </div>

                        </th>
                        <td ng-repeat="header in dbFormGrid.options.grid.header" style="text-align: center;"
                            ng-show="true" >
                            <div compile ng-if="header.compile"  style="overflow:hidden;max-width:100%" ng-bind-html="row[header.field]"></div>
                            <a ng-click="header.clickEvent(dbFormGrid.rows[p_index])" ng-class="header.class" ng-if="!header.compile && header.clickEvent">
                                {{row[header.field]}}</a>
                            <span ng-if="!header.compile && !header.clickEvent" ng-class="header.class"> {{row[header.field]}}</span>
                        </td>
                        <td ng-if="dbFormGrid.options.grid.rowOperation.show" style="text-align: center;">
                            <button type="button" style="padding: 3px 8px; margin-right:3px;"
                                    class="btn btn-default {{button.class}}"
                                    ng-disabled="button.isDisabled(row)"
                                    ng-repeat="button in dbFormGrid.events.grid.rowEvents"
                                    ng-click="button.click(dbFormGrid.rows[p_index])" title="{{button.name}}">
                                {{button.name}}
                            </button>
                        </td>
                    </tr>
                    <tr ng-show="dbFormGrid.rows.length==0">

                        <td width="100%"
                            ng-if="!dbFormGrid.options.grid.settings.showCheckBox && !dbFormGrid.options.grid.rowOperation.show"
                            colspan="{{dbFormGrid.options.grid.header.length}}" class="text-center">
                            {{dbFormGrid.loadingTip}}
                        </td>
                        <td width="100%"
                            ng-if="dbFormGrid.options.grid.settings.showCheckBox != dbFormGrid.options.grid.rowOperation.show"
                            colspan="{{dbFormGrid.options.grid.header.length + 1}}" class="text-center">
                            {{dbFormGrid.loadingTip}}
                        </td>
                        <td width="100%"
                            ng-if="dbFormGrid.options.grid.settings.showCheckBox && dbFormGrid.options.grid.rowOperation.show"
                            colspan="{{dbFormGrid.options.grid.header.length + 2}}" class="text-center">
                            {{dbFormGrid.loadingTip}}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <footer class="panel-footer">
            <div class="text-right">
                <ul class="pagination">
                    <li class="paginate_button" ng-click="dbFormGrid.reLoadData()">
                        <a href="javascript:;" class="refresh"><i class="fa fa-refresh"></i></a>
                    </li>
                    <li class="paginate_button previous {{dbFormGrid.page.prevPageDisabled}}"
                        ng-click="dbFormGrid.pageNumberClick('prev')">
                        <a href="javascript:;"><i class="fa fa-angle-left"></i></a>
                    </li>
                    <li ng-repeat="pageNumber in dbFormGrid.page.pageNumbers"
                        class="paginate_button {{pageNumber.active}} {{pageNumber.disabled}}"
                        ng-click="dbFormGrid.pageNumberClick(pageNumber.number)">
                        <a href="javascript:;">{{pageNumber.number}}</a>
                    </li>
                    <li class="paginate_button next {{dbFormGrid.page.nextPageDisabled}}"
                        ng-click="dbFormGrid.pageNumberClick('next')"><a href="javascript:;"><i
                            class="fa fa-angle-right"></i></a>
                    </li>
                    <li class="paginate_button disabled"><a href="javascript:;">{{dbFormGrid.page.totalRecords}}条/{{dbFormGrid.page.totalPages}}页</a>
                    </li>
                </ul>
            </div>
        </footer>
    </div>

</div>


